import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[],
    next_id:6,
    viewKey:'all'
  },
  mutations: {
    getList:function(state,list){
      this.state.list = list;
    },
    addItemToList:function(state,value){
      console.log('===='+value);
      const obj = {
        "id": 1,
        "info": value,
        "done": false

      }
      this.state.list.push(obj);
      this.state.next_id++;
    },
    changeList:function(state,key){
      this.state.viewKey = key;
    },
    clearDone:function(state){
      this.state.list = this.state.list.filter(function(item){
        return item.done==false;
      })
    }
  },
  actions: {
    getList:function(context){
      axios.get('/list.json').then(({data})=>{
        console.log(data);
        context.commit('getList',data);
      })
    },
    clearDone:function(context){
      context.commit('clearDone');
    }
  },
  getters:{
    unDoneLength:function(state){
      return state.list.length;
    },
    infoList:function(state){
      if(state.viewKey == 'all'){
        return state.list
      }

      if(state.viewKey == 'undone'){
        return  state.list.filter(item=>item.done==false);
      }

      if(state.viewKey == 'done'){
        return state.list.filter(item=>item.done==true);
      }
      return state.list;
    }
  },
  modules: {
  }
})
